<script lang="ts">
    import { Checkbox } from "../Checkbox";
    import { useStyle } from "../utils/useStyle";

    const props = $props();
    const onSelect = () => {
        if (!props.data.disabled) {
            props.onSelect(props.data);
        }
    };
    const checked = $derived(props.data._checked);
    const style = $derived(useStyle({}, { display: props.data._hide ? "none" : "flex" }));
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="cm-transfer-list-item" onclick={onSelect} {style}>
    <Checkbox {checked} disabled={props.data.disabled} />
    <div>
        {#if props.render}
            {@render props.render(props.data)}
        {:else}
            {props.data.title}
        {/if}
    </div>
</div>
